<template>
  <div class="quick-menus">
    <el-link v-for="menu in menus" :key="menu.title" :underline="false" :href="`#${menu.id}`">
      {{ menu.title }}
    </el-link>
  </div>
</template>

<script lang="ts" setup>
const menus = [
  {
    id: 'module-use',
    title: '热门'
  },
  {
    id: 'module-search',
    title: '搜索'
  },
  {
    id: 'module-plugin',
    title: '插件'
  },
  {
    id: 'module-database',
    title: '文献'
  },
  {
    id: 'module-knowledgebase',
    title: '知识库'
  },
  {
    id: 'module-OAdatabase',
    title: 'OA数据'
  },
  {
    id: 'module-degree',
    title: '学位'
  },
  {
    id: 'module-chinesejournal',
    title: '国内刊'
  },
  {
    id: 'module-internaljournal',
    title: '国际刊'
  },
  {
    id: 'module-publisher',
    title: '出版商'
  },
  {
    id: 'module-tool',
    title: '工具'
  },
  {
    id: 'module-moyu',
    title: '摸鱼'
  }
]
</script>
<style lang="scss" scoped>
.quick-menus {
  position: fixed;
  left: calc((100% - 1190px) / 2 - 75px);
  width: 50px;
  height: 385px;
  top: 150px;
  background-color: #ffffff;
  padding: 5px;
  border-radius: 5px;
  overflow: hidden;
  border-top: 3px solid #007aff;
  box-shadow: 0px 0px 20px #eef2f5cc;

  .el-link {
    width: 50px;
    height: 32px;
    border: 0px;
    border-radius: 3px;
    background-color: white;
    color: #666;
    font-size: 13px;
  }

  .el-link:hover {
    color: #666;
    background: #eef2f5;
  }
}
</style>
